<style lang="scss" scoped>
    .schoolwork_show{
        position: relative;
        .go_center{
            position: absolute;
            right: 10px;
            top: 20px;
        }
    }
    .currentGroup{
        border-bottom: 1px dashed $border-color;
        &:last-child{
            border:0
        }
    }
</style>
<template>
    <div class="schoolwork_show py-2 border-radius">
        <Button class="go_center" @click="go_center">返回个人中心</Button>
        <div v-if="!step">
            <h4 class="block-title">{{content.title}}</h4>
            <div class="mt-1 p-2">
                <div class="desp w-100b" style="word-break:break-all" v-html="content.content"></div>
                <div class="mt-2" v-if="content.file_list.length">
                    <span class="mr-1"> 附件列表：</span>
                    <download-list :file_list="content.file_list"/>
                </div>
                <div class="mt-4">
                    <Button @click="step=1" type="primary" size="large">查看作答情况</Button>
                </div>
            </div>
        </div>
        <div class="problems p-1" v-else-if="step===1">
            <div>
                <h4 class="block-title">模型展示 <span class="font-14 color-ddd ml-1">本次得分率：<span class="color-yellow">{{accuracy}}%</span></span></h4>
                <div class="mt-1 mb-2 pl-1"> 
                    <download-list v-if="modelFile.length" :file_list="modelFile"/>
                    <p v-else class="color-fff">无模型文件展示</p>
                </div>
            </div>
            <h4 class="block-title">题目树 <span class="color-999 font-12">（点击标题展示展示题目，点击上下箭头展示子节点）</span></h4>
            <Tree :data="treeData" ref="tree" @on-select-change="getNode" :render="treeRender"></Tree>
            <Divider>题目列表</Divider>
            <div v-if="active_node.id">
                <p class="text-center font-16 color-fff" v-if="!currentGroup.length">此节点下无题目</p>
                <div v-for="(value,index) in currentGroup" :key="index" class="mt-2 mb-1 currentGroup">
                    <div class="d-flex line-height-26">
                        <h4 class="block-title  mr-1">{{value.is_multi?'多选题':'单选题'}}</h4>
                    </div>
                    <div class="details p-1">
                        <p class="mb-1">{{value.title}}</p>
                        <CheckboxGroup v-if="value.is_multi" v-model="currentGroupAnswer[index]" >
                            <Checkbox :disabled="value.disabled" class="d-block mb-1" :label="val.index" v-for="val in value.option" :key="val.index">{{val.index+'：'+val.text}}</Checkbox>
                        </CheckboxGroup>
                            <RadioGroup v-else vertical v-model="currentGroupAnswer[index]">
                                <Radio  :disabled="value.disabled" :label="val.index" v-for="val in value.option" :key="val.index">{{val.index+'：'+val.text}}</Radio>
                            </RadioGroup>
                        <div class="my-1" v-if="value.file_list.length">
                            <span class="mr-1">附件列表:</span>
                            <download-list :file_list="value.file_list"/>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
    import {diff_arr} from "@/common/tool"
    import {transcript_detail} from "@/common/sapi"
    export default {
        inject: ['reload'],
        data(){
            return {
                step:0,
                content:{
                    file_list:[]
                },
                currentGroupAnswer:[],
                accuracy:0,
                questions_list:[],
                currentGroup:[],
                treeData:[],
                active_node:{
                    id:'',
                    title:''
                },
                modelFile:[]
            }
        },
        methods:{
            getNode(){
                this.currentGroupAnswer=[]
                const node=this.$refs.tree.getSelectedNodes()
                if(node.length){
                    const {title,id}=node[0]
                    this.active_node={id,title}
                    this.currentGroup=this.questions_list.filter(el=>{
                        if(el.node_id===id){
                            this.currentGroupAnswer.push(el.is_multi?el.content.split(','):el.content)
                            return el
                        }
                    })
                }
            },
            treeRender(h, { data }){
                return h('span', {
                    style: {
                        display: 'inline-block',
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px',
                                color:'#19be6b'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    })
                ]);
            },
            go_center(){
                 this.$Modal.confirm({
                    title: '确认',
                    content: `将退出当前作业，返回个人中心？`,
                    onOk: () => {
                        this.$router.push('center')
                    }
                });
            }
          
        },
        created(){
            transcript_detail({id:this.$route.query.id})
            .then(res=>{
                if(res){
                    this.content=res.data.lesson
                    this.accuracy=res.data.info.accuracy
                    this.questions_list=res.data.answers.map(el=>{
                        el.option=JSON.parse(el.option)
                        return el
                    })
                    this.treeData=res.data.lesson.nodes
                    const currentAnswer=res.data.answers.map(el=>el.content)
                    res.data.lesson.answers.forEach(el => {
                        if(diff_arr(currentAnswer,el.answers))
                            this.modelFile=el.file_list
                    });

                }
            })
        }
    }
</script>